<template>
  <div class="screen">
    <!-- 头部区域 -->
    <div class="head">
      <p class="title">农业数据实时监控系统</p>
      <img src="../../public/static/img/top02.png" class="logo" />
      <img class="switchThem" src="../../public/static/img/dark.png" />
    </div>
    <!-- 图标区域 -->
    <div class="container">
        <div class="left">
            <!-- 横向柱状图 -->
            <div :class="screenStatus.crosswise ? 'fullscreen' : 'crosswise' ">
                <crosswise-comp ref="crosswise"></crosswise-comp>
                <div class="resize" @click="changeScreen('crosswise')">
                    <span :class="['iconfont',screenStatus.crosswise ? 'icon-compress-alt':'icon-expand-alt']"></span>
                </div>
            </div>
            <!-- 纵向柱状图 -->
            <div :class="screenStatus.vertical ? 'fullscreen' : 'vertical' ">
                <vertical-comp ref="vertical"></vertical-comp>
                <div class="resize" @click="changeScreen('vertical')">
                    <span :class="['iconfont',screenStatus.vertical ? 'icon-compress-alt':'icon-expand-alt']"></span>
                </div>
            </div>
      </div>
      <div class="center">
        <!-- 环状图 -->
        <div :class="screenStatus.annular ? 'fullscreen' : 'annular' ">
            <huan-comp ref="annular"></huan-comp>
            <div class="resize" @click="changeScreen('annular')">
                <span :class="['iconfont',screenStatus.annular ? 'icon-compress-alt':'icon-expand-alt']"></span>
            </div>
        </div>
        <!-- 地图 -->
        <div :class="screenStatus.map ? 'fullscreen' : 'map' ">
            <map-comp ref="map"></map-comp>
            <div class="resize" @click="changeScreen('map')">
                <span :class="['iconfont',screenStatus.map ? 'icon-compress-alt':'icon-expand-alt']"></span>
            </div>
        </div>
      </div>
      <div class="right">
        <!-- 折线图 -->
        <div :class="screenStatus.broken ? 'fullscreen' : 'broken' ">
            <zhe-comp ref="broken"></zhe-comp>
            <div class="resize" @click="changeScreen('broken')">
                <span :class="['iconfont',screenStatus.broken ? 'icon-compress-alt':'icon-expand-alt']"></span>
            </div>
        </div>
        <!-- 饼图 -->
         <div :class="screenStatus.pie ? 'fullscreen' : 'pie' ">
            <pie-comp ref="pie"></pie-comp>
            <div class="resize" @click="changeScreen('pie')">
                <span :class="['iconfont',screenStatus.pie ? 'icon-compress-alt':'icon-expand-alt']"></span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入各图例
import crosswiseComp from '@/components/crosswiseComp.vue'
import verticalComp from '@/components/verticalComp.vue'
import huanComp from '@/components/huanComp.vue'
import mapComp from '@/components/mapComp.vue'
import zheComp from '@/components/zheComp.vue'
import pieComp from '@/components/pieComp.vue'

export default {
    components: {
        crosswiseComp,
        verticalComp,
        huanComp,
        mapComp,
        zheComp,
        pieComp
    },
    data() {
        return {
            // 图表容器样式状态
            screenStatus:{
                crosswise:false,
                vertical:false,
                annular:false,
                map:false,
                broken:false,
                pie:false
            }
        };
    },
    computed: {
        
    },
    methods: {
        // 1.大屏切换
        changeScreen(type){
            // 切换样式全屏状态(dom重新渲染)
            this.screenStatus[type] = !this.screenStatus[type]
            // 等到本次dom更新完毕后调用图表组件内部适配方法
            this.$nextTick(()=>{
                this.$refs[type].adapTive()  
            }) 
        },
    },
};
</script>

<style>

/*全屏样式的定义 */
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
  background: black;
}

/* 大屏容器 */
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-image: url("../../public/static/img/bgc01.png");
}

/* 标题区域 */
.head {
  flex: 1;
  border: 2px solid blue;
  margin-bottom: 0.1%;
  position: relative;
}
.head .title {
  text-align: center;
  color: #d96720;
  font-weight: bold;
  font-size: 25px;
  margin: 10px 0 0 0;
}
.head .logo {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
}
.head .switchThem {
  position: absolute;
  right: 4%;
  bottom: 70%;
  color: orange;
  font-size: 14px;
  width: 18px;
}

/* 图标区域 */
.container {
  flex: 8;
  display: flex;
  justify-content: space-around;
}

/* 左侧视图区域 */
.container .left {
  /* flex: 3; */
  border: 1px solid red;
  width: 28%;
  height: 100%;
  margin-left: 0.5%;
  display: flex;
  flex-direction: column;
}
.left .crosswise {
  flex: 3;
  border: 1px solid purple;
  margin-bottom: 8%;
}
.left .vertical {
  flex: 2.5;
  border: 1px solid brown;
}

/* 中间视图区域 */
.container .center {
  /* flex: 5; */
  border: 1px solid green;
  width: 40%;
  height: 100%;
  margin: 0 2%;
  display: flex;
  flex-direction: column;
}
.center .annular {
  flex: 1;
  border: 1px solid palegreen;
  margin-bottom: 3%;
}
.center .map {
  flex: 4;
  width: 100%;
  border:  1px solid red;
}

/* 右侧视图区域 */
.container .right {
  /* flex: 3; */
  border: 1px solid orange;
  width: 28%;
  height: 100%;
  margin-right: 0.5%;
  display: flex;
  flex-direction: column;
}
.right .broken {
  flex: 1;
  border: 1px solid palevioletred;
  margin-bottom: 6%;
}
.right .pie {
  flex: 1;
  border: 1px solid olive;
}

.crosswise,
.vertical,
.annular,
.map,
.broken,
.pie {
  position: relative;
}

/* 缩放标记样式 */
.resize {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  color: white;
}

</style>
